<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useSettingStore } from '../store/setting'
import { ref } from 'vue'
import {
    Menu as IconMenu,
    Setting,
} from '@element-plus/icons-vue'
//获得设置菜单折叠状态store
const settingStore = useSettingStore()
//获取当前的路由的路径
const route = useRoute()
const handleOpen = (key: string, keyPath: string[]) => {

}
const handleClose = (key: string, keyPath: string[]) => {

}
</script>
<template>
    <el-row class="tac">
        <el-col :span="24">
            <h2 class="mb-2">博物馆后台管理系统</h2>
            <el-menu :collapse="settingStore.isCollapse" :collapse-transition="true" active-text-color="linear-gradient(90deg, #e43f5a, #ff7a8a)"
                :router="true" background-color="rgb(48, 65, 86)" class="el-menu-vertical-demo"
                :default-active="route.path" text-color="#fff" @open="handleOpen" @close="handleClose">
                <el-menu-item index="/home">
                    <el-icon>
                        <House />
                    </el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <Tickets />
                        </el-icon>
                        <span>藏品管理</span>
                    </template>
                    <el-menu-item index="/list">
                        <el-icon>
                            <List />
                        </el-icon>
                        藏品总览
                    </el-menu-item>
                    <el-menu-item index="/addCollection">
                        <el-icon>
                            <CirclePlus />
                        </el-icon>新增藏品</el-menu-item>
                    <el-menu-item index="/collectionReview">
                        <el-icon>
                            <Aim />
                        </el-icon>
                        藏品审核</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <Setting />
                        </el-icon>
                        <span>分类管理</span>
                    </template>
                    <el-menu-item index="/classification">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        分类维护</el-menu-item>
                </el-sub-menu>

                <!-- 3. 用户权限 -->
                <el-sub-menu index="4">
                    <template #title>
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>权限管理</span>
                    </template>
                    <el-menu-item index="/userManagement"><el-icon>
                            <Avatar />
                        </el-icon>用户管理</el-menu-item>
                    <el-menu-item index="/permissionManagement"><el-icon>
                            <UserFilled />
                        </el-icon>角色管理</el-menu-item>
                    <el-menu-item index="/departmentMangement"><el-icon>
                            <HelpFilled />
                        </el-icon>部门管理</el-menu-item>
                    <el-menu-item index="/positionManagement"><el-icon>
                            <ChromeFilled />
                        </el-icon>岗位管理</el-menu-item>
                    <el-sub-menu index="4-5">
                        <template #title> <!-- 必须用 template 包裹标题 -->
                            <span><el-icon>
                                    <Memo />
                                </el-icon>日志管理</span>
                        </template>
                        <el-menu-item index="/operationLog">
                            <el-icon>
                                <ScaleToOriginal />
                            </el-icon>操作日志
                        </el-menu-item>
                        <el-menu-item index="/loginOperation">
                            <el-icon>
                                <ScaleToOriginal />
                            </el-icon>登录日志
                        </el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
                <el-sub-menu index="5">
                    <template #title>
                        <el-icon>
                            <VideoCameraFilled />
                        </el-icon>
                        <span>展览管理</span>
                    </template>
                    <el-menu-item index="/exhibition">
                        <el-icon>
                            <List />
                        </el-icon>
                        展览总览
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="6">
                    <template #title>
                        <el-icon>
                            <Calendar />
                        </el-icon>
                        <span>活动管理</span>
                    </template>
                    <el-menu-item index="/action">
                        <el-icon>
                            <List />
                        </el-icon>
                        活动总览
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-col>
    </el-row>
</template>

<style scoped>
.tac .el-col {
    width: 100% !important;
    max-width: 100% !important;
}

.mb-2 {
    margin: 2rem auto 1rem auto;
    text-align: center;
    color: white;
    cursor: pointer;
    /* 新增字体大小和边距规范 */
    font-size: 1rem;
    /* 按设计需求设置 */
}
</style>